<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 显示省 -->
    <select id="province">
        <option>选择省份</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市区</option>
    </select>
    
    <script>
        var pro = {"选择省份":["选择市区"],"湖北省":["武汉市","荆门市","黄冈市"],"湖南省":["长沙市","岳阳市","湘西土家族"]}
        // 1、省市地区二级联动，页面加载完毕后显示出可以选择的省份，当省改变显示省份对应的市
        // 2、实现省市区三级联动(可选)
        var str = "";
        for(key in pro){
            str += `<option>${key}</option>`
            // console.log(pro[key][1])
            document.querySelector("#province").onchange = function(){
            var city = ""; 
            pro[this.value].forEach(function(arr){
                city += `<option>${arr}</option>`
            });
            document.querySelector("#city").innerHTML = city;
        }
        }
        document.querySelector("#province").innerHTML = str;
       
        











        // document.querySelector("#province").onchange = function(){
        //     // console.log(123)
        //     if(document.querySelector("#province").value == '湖北省'){
        //         document.querySelector("#city").innerHTML = hbs;
        //     }else if(document.querySelector("#province").value == '湖南省'){
        //         document.querySelector("#city").innerHTML = hns;
        //     }
        //     else if(document.querySelector("#province").value == '选择省份'){
        //         document.querySelector("#city").innerHTML = mr;
        //     }
        // }
    </script>
</body>
</html>